<template>
  <div>
    <div v-for="item in imgArr" :key="index" class="card">
      <div v-if="tabArr.length > 0 && index === 2" class="weui-tab card-shadow">
        <div class="weui-navbar">
          <i class="icon icon-money"></i>
          <ul v-for="(v, i) in tabArr" :key="i" :class="{'weui-bar__item_on': activeIndex === i}" class="weui-navbar__item" @click="tabClick(i)">
            <li class="weui-navbar__title" :class="{'active':activeIndex === i}">{{v}}</li>
          </ul>
          <p class="weui-navbar__slider" :class="navbarSliderClass"></p>
        </div>
        <div class="weui-tab__panel">
          <div class="weui-tab__content card-shadow">
            <image lazy-load class="width100" :src="imgArr[activeIndex + 2]" mode="widthFix"  />
          </div>
        </div>
      </div>
      <p v-else-if="tabArr.length > 0 && index === 3" class="none"></p>
      <image v-else lazy-load class="width100" :src="item" mode="widthFix" />
    </div>
    <div class="btn-full-box">
      <button class="btn-full" @tap="hardMake">{{btnText}}</button>
    </div>
  </div>
</template>

<script>
import getBookingImg from '@/interface/picture/getBookingImg'
export default {
  components: { },
  data () {
    return {
      btnText: '',
      tabs: {
        babySitter: ['日常照料', '老人护理'],
        matron: ['26天月嫂', '42天月嫂']
      },
      tabArr: [],
      activeIndex: 0,
      img: '',
      imgObj: {
        hourWorker: {
          bizType: 'hourly_worker_image',
          id: '1108663553738121216'
        },
        parenting: {
          bizType: 'child_parenting_image',
          id: '1108663553738121216'
        },
        matron: {
          bizType: 'maternity_matron_image',
          id: '1108663553738121216'
        },
        babySitter: {
          bizType: 'nanny_image',
          id: '1108663553738121216'
        },
        assart: {
          bizType: 'wasteland_image',
          id: '1108663553738121216'
        }
      },
      imgArr: [
      ]
    }
  },
  computed: {
    navbarSliderClass () {
      return `weui-navbar__slider_${this.activeIndex}`
    }
  },
  methods: {
    hardMake () {
      const query = this.$root.$mp.query
      wx.navigateTo({
        url: `/pages/booking/${query.type}/main`
      })
    },
    tabClick (index) {
      this.activeIndex = index
    }
  },
  mounted () {
    const type = this.$root.$mp.query.type
    if (type === 'hourWorker') {
      this.btnText = '立即预订'
    } else {
      this.btnText = '立即预约'
    }
    this.tabArr = this.tabs[type] || []
    this.activeIndex = 0
    getBookingImg(this.imgObj[this.$root.$mp.query.type]).then(list => {
      console.log(list)
      this.imgArr = list
    })
  }
}
</script>
<style lang="less">
  .card{
    margin-bottom: 15px;
    .width100 {
      height: auto;
    }
  }
  .weui-tab{
    margin: 0 13px;
    .weui-navbar{
      margin: 0 17px;
      border-bottom: 1px solid #eaeaea;
      position: relative;
      width: auto;
      .icon-money{
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        left: 2px;
        width: 14px;
        height: 14px;
      }
      .weui-navbar__item{
        font-size: 30px;
        line-height: 36px;
        height:44px;
        padding: 0;
        color: #aaa;
        &.weui-bar__item_on{
          color: #333;
        }
      }
      .weui-navbar__slider{
        background-color: #fa4b70;
        bottom: 1px;
        &.weui-navbar__slider_0{
          left: 43px;
        }
        &.weui-navbar__slider_1{
          left: 201px;
        }
      }
    }
    .weui-tab__panel{
      padding-top: 10px;
    }
  }
</style>